import {Button, Carousel, List, TextareaItem, WhiteSpace, WingBlank} from "antd-mobile";

require('./VoteDetail.less');

import * as React from "react";
import Reflux from 'reflux';
import {Control} from 'react-keeper';
import * as ReactMixin from "react-mixin";
import Store from "./Store";
import Actions from './Actions';

import iconDistrictIntroduce from '../../../../assets/icon/vote/introduce.png';
import iconExamination from '../../../../assets/icon/vote/examination.png';
import iconImage from '../../../../assets/icon/vote/image.png';
import iconSuggestion from '../../../../assets/icon/vote/suggestion.png';
import QuestionnaireList from "../../../../components/questionnaire/QuestionnaireList";

const {API_URL} = require(`../../../../config/${ENV}.json`);

class VoteDetail extends React.Component {

  constructor(props) {
    super(props);
  }

  componentWillMount() {
    Actions.initVote();
  }

  onSelected(value, questionId) {
    Actions.onOptionSelected(value, questionId);
  }

  onInputChange(v) {
    Actions.inputChange(v);
  }

  onVote() {
    Actions.onVote(this.state.vd);
  }

  render() {
    return (
      <div>
        <WingBlank size="md">
          <div className="vote-detail-content">
            <div className="detail-title">{this.state.vd.title}</div>
            {
              this.state.vd.images && this.state.vd.images.length > 0 && (
                <List renderHeader={() => (
                  <div className="detail-item">
                    <img className="v-pr5" src={iconImage}/>
                    <span>方案预览：</span>
                  </div>
                )}>
                  <div className="detail-image">
                    <Carousel>
                      {this.state.vd.images.map((img, index) => (
                        <div
                          style={{ display: 'inline-block', height: '240px' }}
                        >
                          <img
                            src={`${API_URL + img}`}
                            style={{ height: '240px', verticalAlign: 'middle' }}
                            onClick={() => this.onImageClick(index)}
                          />
                        </div>
                      ))}
                    </Carousel>
                  </div>
                </List>
              )
            }
            <List renderHeader={() => (
              <div className="detail-item">
                <img className="v-pr5" src={iconDistrictIntroduce}/>
                <span>方案介绍：</span>
              </div>
            )}>
              <div className="detail-introduce">
                <span>{this.state.vd.description}</span>
              </div>
            </List>
            {
              this.state.vd.questions && this.state.vd.questions.length > 0 &&
              <List renderHeader={() => (
                <div className="detail-item">
                  <img className="v-pr5" src={iconExamination}/>
                  <span>问卷调查：</span>
                </div>
              )}>
                <QuestionnaireList
                  onChange={(value, qNum) => this.onSelected(value, qNum)}
                  questions={this.state.vd.questions}
                  isVoted={this.state.vd.isVoted}
                />
              </List>
            }
            <List renderHeader={() => (
              <div className="detail-item">
                <img className="v-pr5" src={iconSuggestion}/>
                <span>我的意见：</span>
              </div>
            )}>
              <TextareaItem
                placeholder="请在这儿留下您的意见..."
                value={this.state.vd.suggestion}
                rows={5}
                count={100}
                disabled={this.state.vd.isVoted}
                onChange={(v) => this.onInputChange(v)}
              />
            </List>
            <WhiteSpace size="lg" />
            <Button type="primary" onClick={() => this.onVote()} disabled={this.state.vd.isVoted}>{this.state.vd.isVoted ? '已投' : '投票'}</Button>
          </div>
        </WingBlank>

      </div>
    );
  }

  onImageClick(index) {

    let t = this;
    let pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    let items = t.state.vd.images.map((img) => {
      let o = new Image();
      o.src = API_URL+img;
      return ({
        src: API_URL+img,
        w: o.width,
        h: o.height
      });
    });

    // define options (if needed)
    let options = {
      // optionName: 'option value'
      // for example:
      index: index // start at first slide
    };

    // Initializes and opens PhotoSwipe
    let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();

  }

}

ReactMixin.onClass(VoteDetail, Reflux.connect(Store, 'vd'));

export default VoteDetail;
